<template>
  <div class="wrapper">
    <header class="head">
      采购管理&nbsp;&nbsp;/&nbsp;&nbsp;政策列表&nbsp;&nbsp;/&nbsp;&nbsp;<span
        style="font-size: 16px"
        >查看详情</span
      >
    </header>
    <div class="cont">
      <div class="list">
        <div class="title">政策标识：</div>
        <div class="titleVal">{{ form.policyCode }}</div>
      </div>
      <div class="list" style="margin-left: 82px !important;width:400px">
        <div class="title">品牌名称：</div>
        <div class="titleVal ellipsis">{{ form.channelName }}</div>
      </div>
    </div>
    <div class="cont">
      <div class="list" style="width: 232px">
        <div class="title">开始时间：</div>
        <div class="titleVal">{{ form.beginDate }}</div>
      </div>
      <div class="list" style="width: 232px">
        <div class="title">结束时间：</div>
        <div class="titleVal">{{ form.endDate }}</div>
      </div>
    </div>
    <div class="cont">
      <div class="list">
        <div class="title">状态：</div>
        <div class="titleVal">
          <span v-if="form.status == 0">启用</span>
          <span v-if="form.status == 1">停用</span>
        </div>
      </div>
      <div class="list" style="margin-left: 82px !important">
        <div class="title">备注：</div>
        <div class="titleVal">{{ form.remarks }}</div>
      </div>
    </div>
    <div class="title2 titleVal">终端信息</div>

    <div class="boxTitle">
      <div class="one" style="box-sizing: border-box; padding-left: 20px">
        产品类型
      </div>
      <div class="two" style="display: flex">
        <div style="width: 200px">终端类型</div>
        <div>终端单价</div>
      </div>
    </div>

    <div class="boxer1" style="background: #f9fafc">
      <div
        class="boxList"
        style="display: flex"
        v-for="(item, index) in form.productTypeResponseList"
        :key="index"
      >
        <div
          class="lineList one"
          style="box-sizing: border-box; padding-left: 20px"
        >
          <div class="val">{{ item.typeName }}</div>
        </div>
        <div class="lineCont two">
          <div
            class="val"
            v-for="(item1, index1) in item.productInfoResponses"
            :key="index1"
            style="display: flex"
          >
            <div style="width: 200px">{{ item1.labelName }}</div>
              <div class="moneys three val">
                <span
                  v-for="(item2, index2) in item1.unitAmtList"
                  class="moneyLista"
                  :key="index2"
                  >{{ item2.price }}元</span
                >
              </div>

          </div>
        </div>
      </div>
    </div>
    <div v-if="false">
      <div class="title2 titleVal">政策详情图片</div>
      <div class="picGroup" style="display: flex">
        <div
          class="picList"
          v-for="(item, index) in form.policyImgList"
          :key="index"
        >
          <img :src="item.url" style="width: 100%; height: 100%" alt="" />
        </div>
      </div>
    </div>

    <el-button
      type="primary"
      @click="bankList"
      class="aButton"
      style="
        background: white;
        margin-top: 60px;
        margin-left: 200px;
        color: #409eff;
      "
      plain
      >返回</el-button
    >
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      id: "",
      policyCode: "",
      form: {
        beginDate: "", //开始时间
        endDate: "", //结束时间
        policyCode: "", //政策标识
        status: 0,
        remarks: "",
        typeName: "",
      },
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.policyCode = this.$route.query.policyCode;
    this.getDetail();
  },
  methods: {
    //获详情数据
    getDetail() {
      axios
        .post("api/direct/getUpdatePolicyInfo", {
          id: this.id,
          policyCode: this.policyCode,
        })
        .then((res) => {
          var datas = res.data.data;
          this.form = res.data.data;
        })
        .catch((err) => {
        });
    },
    // 点击返回
    bankList() {
      this.$router.push({
        name: "policyList",
      });
    },
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  height: 36px;
  line-height: 36px;
  border-bottom: 1px solid #ebeef5;
  font-size: 16px;
  color: #303133;
  padding-left: 20px;
  margin-bottom: 30px;
  box-sizing: border-box;
  cursor: pointer;
}
.list {
  display: flex;
  margin-bottom: 10px;
}
.cont {
  display: flex;
  padding-left: 30px;
}
.title2 {
  color: #909399;
  padding-left: 30px;
  margin: 10px 0;
}
.boxTitle,
.boxVal {
  display: flex;
}
.boxVal {
  height: 30px;
  line-height: 30px;
}
.boxTitle {
  color: #909399;
  background: #f9fafc;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ebeef5;
  margin: 0 auto;

  width: 98%;
}
.boxer1 {
  background: #f9fafc;
  width: 98%;
  margin: 0 auto;
}
.left {
  width: 200px;
  box-sizing: border-box;
  padding-left: 12px;
}
.picList {
  width: 140px;
  height: 140px;
  background: red;
  margin-left: 30px;
}
.moneyList {
  display: inline-block;
  margin-right: 10px;
}
.titleVal {
  color: #303133;
}
.aButton {
  color: white;
}
.aButton:hover {
  color: #409eff !important;
}
.moneys {
  display: flex;
}
.one {
  width: 200px;
}
.two {
  /* width: 400px; */
}
.moneyLista {
  margin-right: 5px;
}
.therr {
  width: calc(100% - 400px);
}
.val {
  height: 30px;
  line-height: 30px;
}
.boxList {
  border-bottom: 1px solid #ebeef5;
  padding-top: 5px;
}
.ellipsis {
				white-space: nowrap;
				/*空白不换行*/
				overflow: hidden;
				/*溢出隐藏*/
				text-overflow: ellipsis;
				/*显示省略号*/
			}
</style>